<script>
export default {
  name: "Home"
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="app_header">Header</el-header>
      <el-container>
        <el-aside width="200px" class="app_aside">
<!--          <router-link to="/main">首页</router-link>
          <br><br>
          <router-link to="/main/settings">系统管理</router-link>-->
          <el-menu router>
            <el-menu-item index="1" :route="{path:'/main'}"><el-icon><House /></el-icon><span>首页</span></el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><CameraFilled /></el-icon>
                <span>实时监控</span>
              </template>
              <el-menu-item index="2-1">实时监控</el-menu-item>
              <el-menu-item index="2-2">设备状态</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Histogram /></el-icon>
                <span>站桩管理</span>
              </template>
              <el-menu-item index="3-1">充电站管理</el-menu-item>
              <el-menu-item index="3-2">充电桩管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><TrendCharts /></el-icon>
                <span>运营管理</span>
              </template>
              <el-menu-item index="4-1">充点卡管理</el-menu-item>
              <el-menu-item index="4-2">共享管理</el-menu-item>
              <el-menu-item index="4-3">预约管理</el-menu-item>
              <el-menu-item index="4-4">计费规则</el-menu-item>
              <el-menu-item index="4-5">客户管理</el-menu-item>
              <el-menu-item index="4-6">车辆管理</el-menu-item><el-icon><Document /></el-icon>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="5-1">充电记录</el-menu-item>
              <el-menu-item index="5-2">交易流水</el-menu-item>
              <el-menu-item index="5-3">充值记录</el-menu-item>
              <el-menu-item index="5-4">结账记录</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon><WarningFilled /></el-icon>
                <span>报警管理</span>
              </template>
              <el-menu-item index="6-1">报警设置</el-menu-item>
              <el-menu-item index="6-2">报警信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>运维管理</span>
              </template>
              <el-menu-item index="7-1">任务管理</el-menu-item>
              <el-menu-item index="7-2">运维人员</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="8">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>分析报表</span>
              </template>
              <el-menu-item index="8-1">运营分析</el-menu-item>
              <el-menu-item index="8-2">客户分析</el-menu-item>
              <el-menu-item index="8-3">故障分析</el-menu-item>
              <el-menu-item index="8-4">能耗报表</el-menu-item>
              <el-menu-item index="8-4">财务报表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="9">
              <template #title>
                <el-icon><Operation /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="9-1">部门管理</el-menu-item>
              <el-menu-item index="9-2" >员工管理</el-menu-item>
              <el-menu-item index="9-3">角色管理</el-menu-item>
              <el-menu-item index="9-4" :route="{path:'/main/settings'}">系统管理</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main class="app_main">
            <RouterView/>
          </el-main>
          <el-footer class="app_footer">Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.app_header{
  border:1px solid red;
}
.app_aside{
  border: 1px solid blue;
  height: 100vh;
}
.app_main{
  border: 1px solid brown;
  margin: 5px 0 5px 5px;
}
.app_footer{
  border: 1px solid cadetblue;
}
</style>